<div id="app">
    <b-carousel id="carousel1"
                ref="carousel"
                controls
                indicators
                :interval="interval"
                :no-animation="noAnimation"
                :fade="fade"
                v-model="slide"
                @sliding-start="onSlide"
                @sliding-end="onSlid"
                background="grey">

        <!-- Text slides -->
        <b-carousel-slide :img="blankImg(1024,480)"
                          caption="First slide"
                          text="Nulla vitae elit libero, a pharetra augue mollis interdum.">
        </b-carousel-slide>

        <!-- Slides with custom text -->
        <b-carousel-slide :img="blankImg(1024,480)">
            <h1>Hello world!</h1>
        </b-carousel-slide>

        <!-- Slides with image -->
        <b-carousel-slide img="https://picsum.photos/1024/480/?image=52">
        </b-carousel-slide>

        <!-- Slides with image -->
        <b-carousel-slide img="https://picsum.photos/1024/480/?image=54">
        </b-carousel-slide>

    </b-carousel>

    <p class="mt-4 mb-4">
        Slide #: {{ slide }}<br>
        Is Sliding: {{ sliding }}
    </p>

    <!-- empty carousel -->
    <b-carousel id="carousel2"
                ref="carousel2"
                controls
                indicators
                background="grey">
    </b-carousel>
</div>
